<template>
	<div>
		<el-form   :label-position="labelPosition"
		    label-width="120px"
		    class="demo-ruleForm ">
			<el-row class="container">
				<el-page-header @back="goback" content="">
				</el-page-header>
				<!-- <el-col style="margin-top: 20px;">
					<el-button>编辑</el-button>
					<el-button style="color:red;">删除</el-button>
				</el-col> -->
				<el-col :span="12" style="margin-top:20px;">
					<el-form-item label="种苗名称：">
					    {{this.ruleForm.breedName}}
					</el-form-item>
					<el-form-item label="养殖日期：">
					    {{this.ruleForm.time}}
					</el-form-item>
					<el-form-item label="基地：">
					    {{this.ruleForm.breedBaseName}}
					</el-form-item>
				</el-col>
				<el-col :span="10" style="margin-top:20px;">
					<el-form-item label="养殖批号：">
					    {{this.ruleForm.batch}}
					</el-form-item>
					<el-form-item label="养殖负责人：">
					    {{this.ruleForm.principalName}}
					</el-form-item>
					<el-form-item label="养殖区域：">
					    {{this.ruleForm.soilName}}
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="container" style="margin-top:20px;">
				<h3>繁殖详情</h3>
				<el-col :span="7" style="margin-top:20px;">
				    <el-input placeholder="编号/绑定设备" v-model="searchName" style="width:300px;">
				        <i slot="prefix" class="el-input__icon el-icon-search"></i>
				        <el-button slot="append" @click="handleSearch">搜索</el-button>
				    </el-input>
				</el-col>
				<el-col>
					<el-table
						:data="tableData"
						border
						style="margin-top:20px;"
						ref="multipleTable"
						header-cell-class-name="table-header"
					>
						<el-table-column prop="time" sortable label="导入时间"></el-table-column>
						<el-table-column prop="type" sortable label="编号类型"></el-table-column>
						<el-table-column prop="code" sortable label="编号"></el-table-column>
						<el-table-column prop="sex" sortable label="性别"></el-table-column>
						<el-table-column sortable label="绑定设备">
						  
						</el-table-column>
					<!-- 	<el-table-column label="操作" width="150" align="center">
							<template slot-scope="scope">
							   
								<el-button
									type="text"
									style="color: red;"
									@click="handleDelete(scope.$index, scope.row)"
								>删除</el-button>
							</template>
						</el-table-column> -->
					</el-table>
					<el-pagination
						layout="total, prev, pager, next, jumper"
						:page-size="pagesize"
						:current-page.sync="currentPage"
						:total="total"
						@current-change="handleCurrentChange"
						style="margin-top:20px"
					></el-pagination>
				</el-col>
				
			</el-row>
			<el-row class="container" style="margin-top:20px;">
				<h3>母源信息</h3>
				<el-col :span="7" style="margin-top:20px;">
				    <el-input placeholder="品种名称/养殖批号/编号" v-model="searchName1" style="width:300px;">
				        <i slot="prefix" class="el-input__icon el-icon-search"></i>
				        <el-button slot="append" @click="handleSearch1">搜索</el-button>
				    </el-input>
				</el-col>
				<el-col>
					<el-table
						:data="tableData1"
						border
						style="margin-top:20px;"
						ref="multipleTable"
						header-cell-class-name="table-header"
					>
						<el-table-column prop="time" sortable label="导入时间"></el-table-column>
						<el-table-column prop="seedName" sortable label="品种名称"></el-table-column>
						<el-table-column prop="batch" sortable label="养殖批号"></el-table-column>
						<el-table-column prop="type" sortable label="编号类型"></el-table-column>
						 <el-table-column prop="code" sortable label="编号"></el-table-column>
					   <el-table-column prop="sex" sortable label="性别"></el-table-column>
						<!-- <el-table-column label="操作" width="150" align="center">
							<template slot-scope="scope">
							   
								<el-button
									type="text"
									style="color: red;"
									@click="handleDelete1(scope.$index, scope.row)"
								>删除</el-button>
							</template>
						</el-table-column> -->
					</el-table>
					<el-pagination
						layout="total, prev, pager, next, jumper"
						:page-size="pagesize"
						:current-page.sync="currentPage1"
						:total="total1"
						@current-change="handleCurrentChange1"
						style="margin-top:20px"
					></el-pagination>
				</el-col>
				
			</el-row>
			<el-form-item class="footerFixed" label-width="0px">
			    <el-button @click="goback">返回</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { born_findById,breed_detail_findByList } from '@/request/breedApi';
	export default{
		data(){
			return{
				ruleForm:{},
				labelPosition:'right',
				tableData:[],
				tableData1:[],
				currentPage:1,
				currentPage1:1,
				total:0,
				total1:0,
				pagesize:10,
				searchName:'',
				searchName1:''
			}
		},
		mounted() {
			this.init();
		},
		methods:{
			init() {
				//繁殖信息
				born_findById(this.$route.query.id).then((res) => {
					this.ruleForm = res.data;
				});
				//养殖详情列表
				var params = {
					"relevanceId": this.$route.query.id,
					"searchName": this.searchName,
					"source":"繁殖",
					"page": this.currentPage
				}
				breed_detail_findByList(params).then((res) => {
					this.tableData = res.rows;
					this.total = res.total;
				});
				//母源详情列表
				var params = {
					"relevanceId": this.$route.query.id,
					"searchName": this.searchName1,
					"source":"母源",
					"page": this.currentPage1
				}
				breed_detail_findByList(params).then((res) => {
					this.tableData1 = res.rows;
					this.total1 = res.total;
				});
			},
			handleDelete(index,row){
				
			},
			// 母源信息的删除
			handleDelete1(idnex,row){
				
			},
			handleCurrentChange(val) {
			    this.currentPage = val;
			    
			},
			handleCurrentChange1(val) {
			    this.currentPage1 = val;
			    
			},
			handleSearch(){
				//养殖详情列表
				var params = {
					"relevanceId": this.$route.query.id,
					"searchName": this.searchName,
					"source":"繁殖",
					"page": this.currentPage
				}
				breed_detail_findByList(params).then((res) => {
					this.tableData = res.rows;
					this.total = res.total;
				});
			},
			handleSearch1(){
				//母源详情列表
				var params = {
					"relevanceId": this.$route.query.id,
					"searchName": this.searchName1,
					"source":"母源",
					"page": this.currentPage1
				}
				breed_detail_findByList(params).then((res) => {
					this.tableData1 = res.rows;
					this.total1 = res.total;
				});
			},
			goback(){
				this.$router.go(-1)
			},
		}
	}
</script>

<style scoped>
	.el-pagination {
	    text-align: center;
	}
</style>

